:root {
  --button-prim-bg: #409eff;
  --button-prim-hover-bg: #5eaeff;
}

body {
  margin: 0;
  padding: 0;
}

.right {
  float: right;
}

.red {
  color: #FF8040;
}

.green {
  color: #007500;
}

.white {
  color: #fefefe;
}

.blue {
  color: #0080FF;
}

.bold {
  font-weight: bold;
}

.bolder {
  font-weight: bolder;
}

.highlight {
  color: #FF8040;
  font-size: large;
  font-weight: bold;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.link-style {
  color: #0080FF;
  margin-right: 10px;
  cursor: pointer;
  display: inline-block;
}

.link-style:hover {
  opacity: .7;
}

.pad10 {
  padding: 10px;
}

.pad20 {
  padding: 20px;
}

.pad30 {
  padding: 30px;
}

.pt10 {
  padding-top: 10px;
}

.pb10 {
  padding-bottom: 10px;
}

.pl10 {
  padding-left: 10px;
}

.pr10 {
  padding-right: 10px;
}

.pt20 {
  padding-top: 20px;
}

.pb20 {
  padding-bottom: 20px;
}

.pl20 {
  padding-left: 20px;
}

.pr20 {
  padding-right: 20px;
}

.pt30 {
  padding-top: 30px;
}

.pb30 {
  padding-bottom: 30px;
}

.pl30 {
  padding-left: 30px;
}

.pr30 {
  padding-right: 30px;
}

.mt10 {
  margin-top: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.ml10 {
  margin-left: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml20 {
  margin-left: 20px;
}

.mr20 {
  margin-right: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mb30 {
  margin-bottom: 30px;
}

.ml30 {
  margin-left: 30px;
}

.mr30 {
  margin-right: 30px;
}

.mt100 {
  margin-top: 100px;
}

.mb100 {
  margin-bottom: 100px;
}

.ml100 {
  margin-left: 100px;
}

.mr100 {
  margin-right: 100px;
}

.w0 {
  width: 100%;
}

.w100 {
  width: 100px;
}

.w120 {
  width: 120px;
}

.w140 {
  width: 140px;
}

.w160 {
  width: 160px;
}

.w180 {
  width: 180px;
}

.w200 {
  width: 200px;
}

.w300 {
  width: 300px;
}

.w400 {
  width: 400px;
}

.w500 {
  width: 500px;
}

.h0 {
  height: 100%;
}

.h60 {
  height: 60px;
}

.h100 {
  height: 100px;
}

.h200 {
  height: 200px;
}

.h300 {
  height: 300px;
}

.h400 {
  height: 400px;
}

.h500 {
  height: 500px;
}

.flex {
  display: flex;
  align-items: baseline;
}

.flex-column {
  display: flex;
  flex-flow: column;
}

.gray {
  color: gray;
}

.warning {
  color: #F75000;
}

.border {
  border: 1px solid gray;
}

.radius {
  border-radius: 10px;
}

.shadow {
  box-shadow: 5px 5px 5px lightgray;
}

.no-shadow {
  box-shadow: none !important;
}

.h1 {
  margin-bottom: 50px;
  font-size: xx-large;
  font-weight: bolder;
  margin-bottom: 30px;
}

.h2 {
  margin-bottom: 40px;
  font-size: x-large;
  font-weight: bold;
}

.h3 {
  margin-bottom: 30px;
  font-size: large;
  font-weight: bold;
}

.h4 {
  margin-bottom: 20px;
  font-size: medium;
  font-weight: normal;
}

.h5 {
  margin-bottom: 10px;
  font-size: small;
  font-weight: lighter;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-block {
  background-color: #222;
  color: #e0f0f0;
  padding: 10px;
}

.code-block .intend {
  margin-left: 20px;
}

.section {
  display: block;
  padding: 20px;
  margin: 20px 10px;
  background-color: #f9f9f9;
  border: 1px solid lightgray;
}


.button {
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid lightgray;
  background: linear-gradient(#f0f0f0, #fefefe, #f0f0f0);
  display: inline-block;
  cursor: pointer;
  transition: all .1s;
  user-select: none;
  margin-right: 10px;
}

.button:hover {
  box-shadow: 3px 3px 3px lightgray;
  transform: translate(-1px, -1px);
}

.button.primary:hover {
  background: var(--button-prim-hover-bg);
}

.button:active {
  box-shadow: none;
  transform: none;
}

.button.primary {
  color: white;
  background: var(--button-prim-bg);
  border: 1px solid var(--button-prim-bg);
}
.button.primary:active {
  background: var(--button-prim-bg);
}